<template>
	<view class="container">
		<view class="header-top">团购优惠</view>
		<view class="list">
			<view class="header">汽车惠民活动走进群众生活</view>
			<view class="info-container">
				<view class="company">陌陌汽车行业</view>
				<view class="data">2025/10/10</view>
			</view>
			<view class="banner">
				<image src="/static/whb/youhui1.jpg" class="banner-image"></image>
			</view>
			<view class="message-list">
				<view class="message-item">
					<text class="message-text">
						哇塞！薅羊毛的看过来！易车修汽车维修服务中心出优惠团购了！纯手工洗车只要25元一次，还增20元油券，够意思了吧！哇
						塞！薅羊毛的看过来！易车修汽车维修服务中心出优惠团购了！纯手工洗车只要25元一次，还增20元油券，够意思了吧！
					</text>
				</view>
			</view>
			<view class="price-info">
				<view class="price">
					<text class="current-price">价格：¥99.00</text>
					<text class="original-price">原价：¥199.00</text>
				</view>
				<view class="activity-time">
					<text>活动起止日期：2023-3-10 08:00 至 2023-3-18 23:59</text>
				</view>
				<view class="contact-info">
					<text>咨询电话: 0379-66666666</text>
				</view>
				<view class="notes">
					<text>注意事项:暂无</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 如果有需要引入的依赖或者逻辑处理，可以在这里添加
</script>

<style>
	.container {
		height: 200px;
		background-color: #007AFF;
	}

	.header-top {
		text-align: center;
		color: white;
		padding-top: 10px;
		font-size: 20px;
	}

	.list {
		background-color: white;
		margin: 10px 15px 0 15px;
	}

	.header {
		text-align: center;
		color: #000;
		padding: 5px 0 0 0;
		font-size: 18px;
		background-color: white;
	}

	.info-container {
		display: flex;
		justify-content: space-between;
		padding: 0 15px;
		margin-bottom: 10px;
	}

	.company {
		font-size: 14px;
		color: #333;
	}

	.date {
		font-size: 14px;
		color: #333;
	}


	.banner {
		margin: 10px 15px;
	}

	.banner-image {
		width: 100%;
		border-radius: 10px;
	}

	.message-list {
		background-color: white;
		margin: 10px 15px;
		padding: 10px;
		border-radius: 10px;
	}

	.message-item {
		margin-bottom: 10px;
	}

	.message-text {
		font-size: 14px;
		color: #333;
	}

	.price-info {
		background-color: white;
		margin: 10px 15px;
		padding: 10px;
		border-radius: 10px;
	}

	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.current-price {
		font-size: 18px;
		color: #e60012;
		font-weight: bold;
	}

	.original-price {
		font-size: 14px;
		color: #999;
		text-decoration: line-through;
	}

	.activity-time,
	.contact-info,
	.notes {
		margin-top: 10px;
	}

	.activity-time text,
	.contact-info text,
	.notes text {
		font-size: 14px;
		color: #333;
	}
</style>